<template>
    <div class="filter">
        <el-row>
            <el-col
                class="filter-item"
                v-for="(item, index) in list"
                :key="index"
                :span="item.span || span"
            >
                <!-- label -->
                <span
                    class="label"
                    :style="{ width: labelWidth && labelWidth < 84 ? labelWidth + 'px' : '84px' }"
                    >{{ item.label }}</span
                >
                <el-input
                    v-if="item.type === 'input'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                    @keyup.enter="() => (item.enterTriiger ? $emit('search') : null)"
                >
                </el-input>
                <el-select
                    v-if="item.type === 'select'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                >
                    <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                        v-bind="{ ...item.optionProps }"
                    />
                </el-select>
                <el-date-picker
                    v-if="item.type === 'date_pick'"
                    v-bind="{ ...item.props }"
                    v-model="modelValue[item.key]"
                >
                </el-date-picker>
            </el-col>
            <div class="btn">
                <el-button type="primary" @click="$emit('search')" :icon="Search">搜索</el-button>
                <el-button @click="$emit('reset')" :icon="RefreshLeft">重置</el-button>
            </div>
        </el-row>
    </div>
</template>

<script lang="ts">
import { ElInput, ElSelect, ElDatePicker, ElOption } from "element-plus";
interface FilterBase {
    label: string;
    key: string;
    enterTriiger?: boolean;
    span?: number;
}

interface InputFilter extends FilterBase {
    type: "input";
    props?: InstanceType<typeof ElInput>["$props"];
}

interface SelectFilter extends FilterBase {
    type: "select";
    options: Record<string, any>[];
    props?: InstanceType<typeof ElSelect>["$props"];
    optionProps?: InstanceType<typeof ElOption>["$props"];
}

interface DatePickerFilter extends FilterBase {
    type: "date_pick";
    props?: InstanceType<typeof ElDatePicker>["$props"];
}

type FilterItem = InputFilter | SelectFilter | DatePickerFilter;
export const FilterItem = {
    name: "FilterItem",
};
</script>

<script setup lang="ts">
import { Search, RefreshLeft } from "@element-plus/icons-vue";
import { toRefs } from "vue";

interface Props {
    list: FilterItem[];
    modelValue: Record<string, any>;
    span?: number;
    labelWidth?: number;
}
const props = withDefaults(defineProps<Props>(), {
    list: () => [],
    modelValue: () => ({}),
    enterTriiger: false,
    span: 6,
});

defineEmits<{
    (e: "search"): void;
    (e: "reset"): void;
}>();

// 处理标签宽度，最大宽度为84px
const { list, modelValue, span, labelWidth } = toRefs(props);
</script>

<style lang="scss" scoped>
.filter {
    .filter-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .label {
            display: block;
            text-align: right;
            font-size: 14px;
            margin-right: 16px;
            flex-shrink: 0;
            color: #606266;
        }
        .el-input,
        .el-select {
            width: 100%;
            max-width: 280px;
        }
    }
    .btn {
        margin-left: 16px;
    }
}
</style>
